<template>
  <div>
    <router-view></router-view>
    <div class="footer">
      <van-tabbar
        v-model="active"
        inactive-color="#A2A2A2"
        active-color="#010101"
      >
        <van-tabbar-item @click="handleClick">社区</van-tabbar-item>
        <van-tabbar-item @click="handleClick">商城</van-tabbar-item>
        <van-tabbar-item @click="handleClick">
          <input class="issus" type="button" value="+" />
        </van-tabbar-item>
        <van-tabbar-item @click="handleClick">消息</van-tabbar-item>
        <van-tabbar-item @click="handleClick">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { ref, watch } from "vue";
import router from "../router/index.js";
import { useRoute } from "vue-router";
// 配合下面的句子可以获取之前页面的url
// import { useRoute } from "vue-router";

export default {
  setup() {
    // 底部信息的路由数据
    const route = useRoute();
    const FOOTER_DATA = [
      "/main/common",
      "/main/store",
      "/main/issuing",
      "/message",
      "/main/mine",
    ];
    // 底部的哪个数据处于激活
    const active = ref(FOOTER_DATA.indexOf(route.path));
    watch(route, (newValue) => {
      // 直接监听
      active.value = FOOTER_DATA.indexOf(newValue.path);
    });
    function handleClick() {
      // if (active.value !== 3) {
      //   router.replace(FOOTER_DATA[active.value].router);
      // } else {
      //   router.push(FOOTER_DATA[active.value].router);
      // }
      router.push(FOOTER_DATA[active.value]);
    }
    return { active, handleClick, watch };
  },
};
</script>
<style lang="less" scoped>
.footer {
  width: 100%;
  height: 50px;
  background: orange;
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  font-size: 15px;
  .issus {
    width: 45px;
    height: 30px;
    background: linear-gradient(
      270deg,
      rgba(254, 191, 112, 0.8),
      rgba(255, 141, 87, 0.8)
    );
    border: 0;
    border-radius: 5px;
    color: #fff;
    font-size: 31px;
    font-weight: bold;
  }
}
.van-tabbar-item {
  font-size: 15px;
}
</style>
